<template>
    <van-nav-bar
    title="商品分类"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />
    <van-sidebar v-model="active">
  <van-sidebar-item v-for="item in CategorylistData" :key="item" :title="item"></van-sidebar-item>
</van-sidebar>
  
  <div v-for="item1 in CategorybrandlistData" :key="item1">{{item1.brand}}</div>
  
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import { useRoute } from "vue-router";
import type { Ref } from "vue";
import { getCategorylist } from '@/api/api';
import {getCategorybrandlist} from '@/api/api'
interface ICategorylist{
  code:string
  data:any;
  message:string
}
const category: Ref<string> = ref("手机");
const active = ref(0);
const route = useRoute()
const CategorylistData:Ref<any>=ref();
const CategorybrandlistData:Ref<any>=ref();
const APICategorylist = async ()=>{
    const res=(await getCategorylist()) as unknown as ICategorylist;
    if(res.code==="200")
    CategorylistData.value=res.data
}
const APICategorybrandlist=async()=>{
  const res=(await getCategorybrandlist({category:category.value})) as unknown as ICategorylist ;
  if(res.code==="200")
  CategorybrandlistData.value=res.data
}
onMounted(() => {
  APICategorylist();
  APICategorybrandlist();
});

</script>

<style lang="scss" scoped>

</style>